<template>
<!--pages/personalCenter/personalCenter.wxml-->
<view class="personal-center">
  <!-- 头部 -->
  <view class="personal-header">
    <!-- <image  src="/static/images/person/pic_userbg.png" class="user-bg"></image> -->
			<view class="user-bg">
				<view class="orderstatus">
						 <view v-if="orderstatus == 0">已入住</view>
						 <view v-if="orderstatus == 1">待入住</view>
						 <view v-if="orderstatus == 2">待付款</view>
						 <view v-if="orderstatus == 4">已取消</view>
						 <view v-if="orderstatus == 8">已完成</view>
						 <view v-if="orderstatus == 9">等待酒店确定</view>
						 <view v-if="orderstatus == 10">审核中</view>
				</view>
				<view class="orderdetail">
					<view v-if="orderstatus == 4">您的订单已消费，期待您再次预定哦</view>
					<view v-if="orderstatus == 1">您的订单待入住，请尽快入住哦</view>
					<view v-if="orderstatus == 2">您的订单待付款，请尽快付款哦</view>
					<view v-if="orderstatus == 0">您的订单已入住，期待您再次预定哦</view>
					<view v-if="orderstatus == 9">酒店正在确认，预计1分钟</view>
					<view v-if="orderstatus == 10">您的订单取消中，等待酒店确认后退款</view>
				</view>
				<view class="orderbtn">
					<button v-if="orderstatus == 2" @click="btn(1)">立刻付款</button>
					<button v-if="orderstatus == 1" @click="btn(6)">取消订单</button>
					<button v-if="orderstatus == 9" disabled="true">酒店确定中...</button>
					<button v-if="orderstatus == 0" @click="btn(5)">一键续住</button>
					<button v-if="orderstatus == 0"  @click="btn(3)">退房</button>
					<button v-if="orderstatus == 8"  @click="btn(2)">再次预定</button>
					<button v-if="orderstatus == 10" disabled="true" >审核中...</button>
					<!-- <button v-if="orderstatus == 1">您的订单待入住，请尽快入住哦</button> -->
				</view>
			</view>
		</view>
		<!-- 我的订单+待入住 -->
		<!-- 费用明细 -->
		<view class="bookform-input">
			 <view class="title">在线支付</view>
			 <view class="uni-input">￥{{ordermsg.orderPay}}</view>
			 <view class="CostDetail" @click="openBottomPopup">费用明细</view>
		</view>
		<view class="orderhotel">
			 <view class="title">
					 <view class="hotelname">{{ordermsg.hotels.orgName}}</view>
					 <view class="hoteladdress">{{ordermsg.hotels.address}}</view>
					 <view class="hotelother">
						 <view class="hotelother-btn" @click="checkMap(ordermsg.hotels.orgName,ordermsg.hotels.cityName+ordermsg.hotels.districtId+ordermsg.hotels.address,ordermsg.hotels.latitude,ordermsg.hotels.longitude)">
							 <image src="../../static/icon/address.png"/>
							 <view class="">地址/导航</view>
						 </view>
						 <view class="hotelother-btn" @click="callPhone">
						 							 <image src="../../static/icon/tel.png"/>
						 							 <view class="">联系商家</view>
						 </view>
					 </view>
			 </view>
			 <view class="orderroom">
				 <view class="room">
					 <view class="roomname">单人原木房间</view>
					 <view class="watchroom"  @tap="orderpage(ordermsg.roomTypes[0].id)">查看房型</view>
				 </view>
				 <view class="roominfo">大床|不含早|有wifi</view>
				 <view class="ordertime"> 12-02(周五)|12-04(周日) 共2晚1间</view>
			 </view>
			 <view class="orderpeople">
				 <view class="userinfo">
				 					 <view class="userinfo-title">入住人</view>
				 					 <view class="userinfo-contant">{{ordermsg.name}}</view>
				 </view>
				 <view class="userinfo">
				 					 <view class="userinfo-title">联系手机</view>
				 					 <view class="userinfo-contant">{{ordermsg.mobile}}</view>
				 </view>
				 <view class="userinfo">
				 					 <view class="userinfo-title">预计到店</view>
				 					 <view class="userinfo-contant">{{bookdate(ordermsg.estimatedArriveTime)}}前</view>
				 </view> 
				 <view class="userinfo">
				 					 <view class="userinfo-title">入住说明</view>
				 					 <view class="userinfo-contant">商家通常14：00开始办理入住，如需提早办理请联系商家</view>
				 </view>
			 </view>
		</view>
		<view class="OrderInformation">
						 <view class="orderinfo">订单信息</view>
						 <view class="userinfo">
						 					 <view class="userinfo-title">订单号</view>
						 					 <view class="userinfo-contant">{{ordermsg.orderSn}}</view>
						 </view>
						 <view class="userinfo">
						 					 <view class="userinfo-title">下单日期</view>
						 					 <view class="userinfo-contant">{{bookdate(ordermsg.createTime)}}</view>
						 </view>
		</view>
		<!-- 订单弹窗 -->
  <view v-show="orderpageshow" class="orderpage" @touchmove.stop = "">
  	  <order-page :animation="animationData" :data="roomdata" :orderbtn="false" class="order"/>
  	  <view  @click="orderclose" class="ordertop"></view>
  </view>
	<!-- 费用弹窗 -->
	<lee-popup ref="bottomPopup" type="bottom" height="240rpx">
		<view>
			价格：{{bookprice(1)}}元
		</view>
		<view>
			单价：{{bookprice(2)}}元
		</view>
		<view>
			已优惠：{{bookprice(3)}}元
		</view>
	</lee-popup>
	</view>
	
</view>
</template>

<script>
// import store from "@/utils/store.js";
import LeePopup from '@/components/lee-popup/lee-popup.vue'
 import orderPage from "@/components/orderPage/orderPage.vue";
 import {_getOrder,_orderCreate,_pay,_payChangeStay,_continueToLive} from '../../common/vmeitime-http/pay.js'
 import {_orderCheckOut} from '../../common/vmeitime-http/order.js'
// import store from "../utils/store.js"
export default {
	data(){
				return {
					id:null,
					orderpageshow:false,
					animationData: {},
					orderstatus:0,
					roomdata:0,
					ordermsg:{
						name:"",
						mobile:"",
						estimatedArriveTime:"",
						estimatedDepartureTime:"",
						orderStatus:2,
						orderPay:0
					},
					payflag:0 //支付标志位
				}
			},
	computed: {
		// 计算属性的 getter
		bookdate() {
		   return function (date) {
			   console.log(date)
			   if(!date){
				   return null
			   }
					return this.dateconversion(date,"ymst","-")
				}
		  
		},
		bookprice() {
		   return function (count) {
			   if(count == 1){
				   return this.ordermsg.orderPay||0
			   }
			   if(count == 2){
			   		return this.ordermsg.dayAmount||this.ordermsg.orderPay
			   }
			   if(count == 3){
			   		return this.ordermsg.couponAmount||0
			   }
			}
		  
		}
	},
  components: {orderPage,LeePopup},
  props: {},
 onUnload() {
        this.animationData = {}
        // 页面关闭后清空数据
      },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (param) {
		 this.animation = uni.createAnimation() 
		 if(param){
			 this.orderstatus = param.static
			 this.id = param.id
		 }
		 this.getorder(this.id )
		 console.log(this.orderstatus)
		 
    // this.userInfo = store.getItem("userInfo");
    // console.log(this.userInfo);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow(){
		console.log('进页面了')
             
  		},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
	  
	  checkMap(name,address,latitude,longitude){
		  console.log(address)
		  if(!latitude || !longitude){
			  uni.showModal({
			      title: '提示',
			      content: '商家未上传地址信息，您可电话联系商家',
			      success: function (res) {
			          if (res.confirm) {
			              console.log('用户点击确定');
			          } else if (res.cancel) {
			              console.log('用户点击取消');
			          }
			      }
			  });
			  return
		  }
		this.BD09(latitude,longitude,name,address)
	  },
	  
	  
	//采用https://tool.lu/coordinate/中的坐标系相互转换api接口
	  BD09(latitude,longitude,name,address){
		  uni.request({
		      url: 'https://tool.lu/coordinate/ajax.html', 
		      data: {
		          src_type: 'bd09',
		          src_coordinate: longitude+","+latitude
		      },
		      header: {
		        
		      },
		      success: (resp) => {
		          console.log(resp.data);
		        uni.getLocation({
		            type: 'gcj02', //返回可以用于uni.openLocation的经纬度
		            success: function (res) {
		        		console.log(latitude+","+longitude)
		                uni.openLocation({
		                    latitude: resp.data.result.gcj02.lat,
		                    longitude: resp.data.result.gcj02.lng,
		        			name:name,
		        			address:address,
		                    success: function () {
		                        console.log('success');
		                    }
		                });
		            }
		        });  
		      }
		  });
	  },
	  
	  callPhone(){
		  uni.makePhoneCall({
		      phoneNumber: '114' //仅为示例
		  });
	  },
	  
	  // 自定义时间格式方法
	  dateconversion(time,format,split){
	  	if(!split){
	  		split = "/"
	  	}
	  	var returndate = ""
	  	console.log(time)
	  	console.log(new Date(time + 8 * 3600 * 1000))
	  	var date = new Date(time + 8 * 3600 * 1000).toJSON().substr(0, 19).replace('T', '-').split('-')
	  	var datex = {
	  		y:date[0],
	  		m:date[1],
	  		s:date[2],
	  		t:date[3],
	  	}
	  	var formatarr = format.split("")
	  	for(let i = 0;i<formatarr.length;i++){
	  		if(i == 0){
	  			returndate = datex[formatarr[i]]
	  		}else{
				if(formatarr[i] == "t"){
					returndate = returndate+" "+datex[formatarr[i]]
				}else{
					returndate = returndate+split+datex[formatarr[i]]
				}
	  		}
	  	}
	  	return returndate;
	  },
	  
	  btn(count){
		  switch(count){
			  case 1:
				this.pay()
				break;
			  case 2:
				uni.reLaunch({
					url:'../index/index'
				})
				break;
			case 3:
				this.checkout()
				break;
			case 5:
				this.paychange()
				break;
		  }
	  },
	  checkout(){
		  var obj = {
			  id:this.ordermsg.id,
			  orderId:this.ordermsg.orderId
		  }
		  uni.showToast({
		  	title:"请前往自主入住机或者酒店前台办理退房",
		  })
		  // uni.showLoading({
		  // 	title:"退房申请中"
		  // })
		  // _orderCheckOut(obj).then(res =>{
			 //  console.log(res)
			 //  uni.showToast({
			 //  	title:"退房申请已提交",
				// success() {
				// 	uni.redirectTo({
				// 		url:"../OrderDetails/OrderDetails?static=10&id="+obj.id
				// 	})
				// }
			 //  })
		  // })
	  },
	  paychange(){
	  		  var that = this
			  console.log(this.payflag)
	  		  if(this.payflag != 0){
	  			  return
	  		  }
	  		  this.payflag = 1
	  		  _payChangeStay({id:this.id,day:1}).then(resp=>{
	  		  	console.log(resp)
	  		  	var paydata = JSON.parse(resp.data.data);
	  		  	uni.requestPayment({
	  		  	    provider: 'wxpay',
	  		  	    timeStamp: paydata.timeStamp,
	  		  	    nonceStr: paydata.nonceStr,
	  		  	    package: paydata.package,
	  		  	    signType: 'MD5',
	  		  	    paySign: paydata.paySign,
	  		  	    success: function (rese) {
	  					that.payflag = 0
	  		  	        console.log('success:' + JSON.stringify(rese));
						_continueToLive({day:1,id:that.id}).then( resa =>{
							console.log(resa)
 						})
	  		  			// uni.redirectTo({
	  		  			// 	url:"../OrderDetails/OrderDetails?static=1&id="+that.id
	  		  			// })
	  		  	    },
	  		  	    fail: function (err) {
	  					that.payflag = 0
	  		  	        console.log('fail:' + JSON.stringify(err));
	  		  			// uni.redirectTo({
	  		  			// 	url:"../OrderDetails/OrderDetails?static=2&id="+that.id
	  		  			// })
	  		  	    }
	  		  	});
	  		  	
	  		  })
	  },
	  pay(){
		  var that = this
		  if(this.payflag != 0){
			  return
		  }
		  this.payflag = 1
		  _pay({id:this.id}).then(resp=>{
		  	console.log(resp)
		  	var paydata = JSON.parse(resp.data.data);
		  	uni.requestPayment({
		  	    provider: 'wxpay',
		  	    timeStamp: paydata.timeStamp,
		  	    nonceStr: paydata.nonceStr,
		  	    package: paydata.package,
		  	    signType: 'MD5',
		  	    paySign: paydata.paySign,
		  	    success: function (rese) {
					that.payflag = 0
		  	        console.log('success:' + JSON.stringify(rese));
		  			uni.redirectTo({
		  				url:"../OrderDetails/OrderDetails?static=1&id="+that.id
		  			})
		  	    },
		  	    fail: function (err) {
					that.payflag = 0
		  	        console.log('fail:' + JSON.stringify(err));
		  			uni.redirectTo({
		  				url:"../OrderDetails/OrderDetails?static=2&id="+that.id
		  			})
		  	    }
		  	});
		  	
		  })
	  },
	  // 获取订单信息
	  getorder(id){
		  while(this.orderstatus == 9){
			  _getOrder(id).then(res =>{
			  			  console.log(res)
			  			  this.ordermsg = res.data.data
			  			  this.orderstatus = this.ordermsg.orderStatus
			  })
		  }
	  },
	  
		openBottomPopup() {
			this.$refs.bottomPopup.open()
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url){
			if(!this.loginStatus){
			    if(url!=="/pages/explain/about"){
		                  url = '/pages/public/login_choose';
				}
			}
			uni.navigateTo({
				url
			})
		}, 
		orderpage(index){
			this.roomdata = index;
			this.orderpageshow = true;
			this.running()
		},
		 running() {
		    this.animation = uni.createAnimation()	
				
			setTimeout(()=>{
				this.animation.translateY(-300).step({duration:200})
				this.animationData = this.animation.export()
				wx.hideTabBar({})
			}, 50);
		},
		orderclose(){
			wx.showTabBar({
				// animation:true
			})
			setTimeout(()=>{
				this.orderpageshow = false;
			}, 50);
			
			this.animation.translateY(300).step({duration:200})
			this.animationData = this.animation.export()
			
		},
		}
	
};
</script>
<style>
@import "./OrderDetails.css";
</style>